<template>
  <div class="rateContainer">
    <div class="stars" @mouseout="outContainer">
      <span
        class="rateItem"
        v-for="(rate, index) in rateArr"
        :key="index"
        @mousemove="moveIn($event, rate, index)"
        @click="handleClick(rate, index)"
      >
      <svg class="icon rate-iconfont " :class="rate.classStr" aria-hidden="true" ref="rateIconfont">
        <use :xlink:href="`#${rate.classStr}`"></use>
      </svg>
      </span>
    </div>
    <span class="rateText">{{ rateText }}</span>
  </div>
</template>

<script>
export default {
  name: 'Rate',
  props: {
    value: { type: Number, required: true, default: 0 }, // 评分分数，默认为0，范围：1 - 5
    rateId: { type: String, required: true, default: "" }, // id
    checkedIcon: { type: String, required: true }, // 选中时，显示的图标
    unCheckedIcon: { type: String, required: true }, // 未选中时，显示的图标
    rateTexts: {
      type: Array,
      default: () => {
        return []
      }
    } // 要显示的文字，数组类型
  },

  data() {
    return {
      rateArr: [
        { rateScore: 1, isChecked: false, classStr: '', rateText: '' },
        { rateScore: 2, isChecked: false, classStr: '', rateText: '' },
        { rateScore: 3, isChecked: false, classStr: '', rateText: '' },
        { rateScore: 4, isChecked: false, classStr: '', rateText: '' },
        { rateScore: 5, isChecked: false, classStr: '', rateText: '' }
      ],
      rateText: '', // 右边显示的文字
      childRateScore: this.value
    }
  },
  created() {
    // 遍历评分数组，分配评分文字和默认选中
    this.rateArr.forEach((item, index) => {
      item.rateText = this.rateTexts[index] ? this.rateTexts[index] : '';
      item.id = this.rateId;
      if (item.rateScore == this.value) {
        for (let i = 0; i <= index; i++) {
          this.rateArr[i].isChecked = true
          this.rateArr[i].classStr = this.checkedIcon
        }
        this.rateText = item.rateText
      } else {
        item.isChecked = false
        item.classStr = this.unCheckedIcon
      }
    })
  },
  methods: {
    moveIn(e, rate, index) {
      // 所有的星星
      // let rateItemDomList = document.querySelectorAll('.rate-iconfont')
      // 鼠标移入当前星星，应该要检查当前星星的左边所有星星，如果没有被选中，就需要添加 checkedIcon
      for (let i = 0; i <= index; i++) {
        if (!this.rateArr[i].isChecked) {
          this.rateArr[i].classStr = this.checkedIcon
        }
      }
      // 鼠标移入当前星星，右边所有的星星，如果没有被选中，就需要移除 unCheckedIcon
      for (let i = index + 1; i < this.rateArr.length; i++) {
        this.rateArr[i].classStr = this.unCheckedIcon
      }
      this.rateText = rate.rateText
    },
    // 点击星星
    handleClick(rate, index) {
      // 点击了当前星星后，当前星星以及当前星星的左边，都要被设置选中
      for (let i = 0; i <= index; i++) {
        this.rateArr[i].isChecked = true
      }
      // 当前星星的右边，都要设置取消选中
      for (let i = index + 1; i < this.rateArr.length; i++) {
        this.rateArr[i].isChecked = false
        this.rateArr[i].classStr = this.unCheckedIcon
      }
      this.childRateScore = rate.rateScore
      this.$emit("change",this.childRateScore )
      this.$emit('starChange', {id:rate.id,value:rate.rateScore})
    },
    // 鼠标移出了rateContainer，要移除选中了的星星以外所有星星的选中效果
    // 并且给已经选中了的星星设置选中
    outContainer() {
      // let rateItemDomList = document.querySelectorAll('.rate-iconfont')
      let rateItemDomList = this.$refs.rateIconfont;
      for (let i = 0; i < rateItemDomList.length; i++) {
        if (this.rateArr[i].isChecked) {
          this.rateArr[i].classStr = this.checkedIcon
        } else {
          this.rateArr[i].classStr = this.unCheckedIcon
        }
      }
      this.rateText = this.rateTexts[this.childRateScore - 1]
    }
  },
  model: {
    prop: 'value',
    event: 'change'
  }
}
</script>

<style scoped>

.stars,.rateContainer {
  display: flex;
  align-items: center;
  height: 30px;
}
.rateItem {
  padding-right: 10px;
  height: 30px;
  margin-top:5px;
}
.rate-iconfont{
  width: 30px;
  height: 30px;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;;
}
.iconfont {
  cursor: pointer;
}

.rateText {
  color: #FF4600;
  font-size: 15px;
  margin-left: 10px;
}
</style>
